<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        window.onload = function (){
            findByItem(1);
        }

        function  findByItem(pageNO){
            axios.get("/user/findByItem",{
                params:{
                    pageNO,
                    name:$("name").value
                }
            }).then(e =>{
                var info = e.data;
                var str = "";
                for(var i=0;i<info.records.length;i++){
                    var obj = info.records[i];
                    str += `<tr><td>${obj.name}</td>
                        <td>${obj.realName}</td>
                        <td><a href="#">删除用户</a>
                        <a href="/user/update.html?id=${obj.id}">修改权限</a></td></tr>`;
                }
                $("userData").innerHTML = str;

                var pageStr = "";
                for(var i=1;i<=info.pages;i++){
                    pageStr += `<a href="javascript:findByItem(${i})">${i}</a> `;
                }
                $("cutPageDiv").innerHTML = pageStr;
            });
        }
    </script>
</head>
<body>
    <h2>用户管理</h2>
    <table border="1" width="90%" cellspacing="0">
        <thead>
            <tr><td>用户名</td><td>真实姓名</td><td>操作</td></tr>
        </thead>
        <tbody id="userData"></tbody>
    </table>
    <div style="margin: 10px;" id="cutPageDiv"></div>
    <div style="display: flex">
        <div style="width: 300px;">
            <a href="/user/add.html">添加用户</a>
        </div>
        <div style="width: 300px;">
            用户名：<input type="text" id="name"><br>
            <input type="button" value="查询" onclick="findByItem(1)">
        </div>
    </div>
</body>
</html>